<!DOCTYPE html>
<html> 
    <head>
        <meta charset="utf-8">
        <script>
            function loadXMLDoc() {
                var xmlhttp;
                if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp = new XMLHttpRequest();
                } else { // code for IE6, IE5
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.onreadystatechange = function() {
                    //0：请求未初始化，还没有调用 open()。 
                    // 1：请求已经建立，但是还没有发送，还没有调用 send()。  
                    // 2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。  
                    // 3：请求在处理中；通常响应中已有部分数据可用了，没有全部完成。  
                    //  4：响应已完成；您可以获取并使用服务器的响应了。

                    //200: "OK" 
                    //404: 未找到页面
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                        document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
                    }
                }
                xmlhttp.open("GET", "../statics/ajax_info.txt", true);
                xmlhttp.send();
            }
        </script>
    </head>
    <body>
        <div id="myDiv">
            <h2>
                使用 AJAX 修改该文本内容
            </h2>
        </div>
        <button type="button" onclick="loadXMLDoc()">
            修改内容
        </button>
    </body>
</html>